<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			background: #6b7392;
			display: flex;
		}
		body>div{
			width: 500px;
			height: 400px;
			border: 1px solid white;
		}
		div div{
			width:90px;
			height: 90px;
			background: #ccf7ff;
			transition: 2s;
		}
		.box1:nth-child(1):hover .a{
			transform: translateX(310px);
		}
		.box2:nth-child(2):hover .a{
			transform: translateY(300px);
		}
		.box3:nth-child(3):hover .a{
			transform: translate(310px,300px);
		}
		.box4:nth-child(4):hover .a{
			transform: translate(200px,150px);
		}
	</style>
	<body class="box">
		<div class="box1"><div class="a"></div></div>
		<div class="box2"><div class="a"></div></div>
		<div class="box3"><div class="a"></div></div>
		<div class="box4"><div class="a"></div></div>
	</body>
</html>

